<template>
	<view class="main">
		<map id="maps" style="position: absolute;top: 0;left: 0;width: 100%; height: 100vh;">
			<cover-view class="top_Fixed" :style="{'height':statusBarHeight+'px'}"></cover-view>
			<cover-view class="map_top flex_between">
				<cover-view class="map_top_left">
					<cover-image class="driver_icon" src="/static/img/driver.png" @click="openPopup()"></cover-image>
				</cover-view>
				<cover-view class="map_top_center">
					<cover-image class="logo_icon" src="/static/img/map_logo.png"></cover-image>
				</cover-view>
				<cover-view class="map_top_left"></cover-view>
			</cover-view>


			<cover-view class="map_bottom_box">
				<cover-image class="map_bottom_bg" src="/static/img/bg9.png"></cover-image>
				<cover-view class="map_bottom">
					<cover-view class="map_bottom_title">Hi. Let's set off together.</cover-view>

					<cover-view class="ride_switch">
						<cover-image class="ride_switch_bg" v-if="carTypeId == '1'"
							src="/static/img/card_left.png"></cover-image>
						<cover-image class="ride_switch_bg" v-if="carTypeId == '2'"
							src="/static/img/card_right.png"></cover-image>
						<cover-view class="ride_switch_bg">
							<cover-view class="ride_switch_top flex_between">
								<cover-view class="ride_switch_type flex_center"
									:class="item.id == carTypeId ? 'ride_switch_typeX' : ''" v-for="item in carTypeList"
									:key="item.id" @click="changeCarType(item)">
									{{item.name}}
								</cover-view>
							</cover-view>

							<cover-view class="start_row flex_left">
								<cover-view class="start_row_point"></cover-view>
								<cover-view class="start_row_word" @click="postion()">
									Starting point positioning name
								</cover-view>
								<cover-image class="start_row_icon" src="/static/img/right.png"></cover-image>
							</cover-view>
							<cover-view class="end_row flex_left">
								<cover-view class="end_row_point"></cover-view>
								<!-- 暂时点击跳转开始打车 -->
								<cover-view class="start_row_word" @click="goCallCar()">Where are you
									going?</cover-view>
							</cover-view>

						</cover-view>
					</cover-view>

					<cover-view class="set_row flex_around">
						<cover-view class="set_card" @click="promotion()">
							<cover-image class="set_icon" src="/static/img/inviteX.png"
								@click="promotion()"></cover-image>
							<cover-view class="set_word" @click="promotion()">Promotion</cover-view>
						</cover-view>
						<cover-view class="set_card" @click="discounts()">
							<cover-image class="set_icon" src="/static/img/couponX.png"
								@click="discounts()"></cover-image>
							<cover-view class="set_word" @click="discounts()">Discounts</cover-view>
						</cover-view>
						<cover-view class="set_card" @click="SecCenter()">
							<cover-image class="set_icon" src="/static/img/safeX.png"
								@click="SecCenter()"></cover-image>
							<cover-view class="set_word" @click="SecCenter()">SecCenter</cover-view>
						</cover-view>
						<cover-view class="set_card" @click="goProfle('2')">
							<cover-image class="set_icon" src="/static/img/driverX.png"
								@click="goProfle('2')"></cover-image>
							<cover-view class="set_word" @click="goProfle('2')">Driver Join</cover-view>
						</cover-view>
					</cover-view>

					<!-- 临时跳转 -->
					<cover-view class="to_driver" @click="goDriver()">成为司机之后的首页</cover-view>
				</cover-view>

				<!-- <cover-view style="display: flex;flex-wrap: wrap;">
					<cover-view style="margin-left: 20rpx;" @click="postion">搜索</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="pay">支付</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="goProfle(1)">我的</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="goProfle(2)">司机</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="ordriver">司机审核</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="tixian">提现</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="order">订单</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="contactPerson">紧急联系人</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="cards">银行卡</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="complaint">Complaint</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="custome">客服</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="setting">设置</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="share">分享</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="driver">driver</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="orderDetail">订单详情</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="my">我的钱包</cover-view>
					<cover-view style="margin-left: 20rpx;" @click="help">帮助</cover-view>
				</cover-view> -->
			</cover-view>


			<cover-view class="popup_modal" v-if="showLeft" @click="showLeft = false">
				<cover-view class="popup_card">
					<cover-view class="user_box flex_between">
						<cover-view class="user_left">
							<cover-view class="user_phone">165*****635</cover-view>
							<cover-view class="user_set flex_left">
								<cover-view class="user_set_word" @click="goProfle('1')">Edit Personal Info</cover-view>
								<cover-image class="user_set_icon" src="/static/img/right_1.png"></cover-image>
							</cover-view>
						</cover-view>
						<cover-image class="user_img" src="/static/img/driver.png" @click="goProfle('1')"></cover-image>
					</cover-view>

					<cover-view class="set_list">
						<cover-view class="set_list_row flex_left" v-for="item in setList" :key="item.id"
							@click="goPage(item)">
							<cover-image class="set_img" :src="'/static/img/' + item.icon"
								@click="goPage(item)"></cover-image>
							<cover-view class="set_name" @click="goPage(item)">{{item.name}}</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>

			<cover-view class="popup_modal flex_center" v-if="showActive" @click="showActive = false">
				<cover-view class="active_card">
					<cover-image class="active_card_bg" src="/static/img/bg.png"></cover-image>
					<cover-view class="active_card_bg">

						<cover-view class="active_title">Spring outing</cover-view>
						<cover-view class="active_coupon_row">
							<cover-image class="active_coupon_row_bg" src="/static/img/bg_coupon.png"></cover-image>

							<cover-view class="active_coupon_row_bg flex_between">
								<cover-view class="active_coupon_left flex_left">
									<cover-view class="active_coupon_tag">MK</cover-view>
									<cover-view class="active_coupon_num">1000</cover-view>
								</cover-view>
								<cover-view class="active_coupon_right">
									<cover-view class="active_coupon_title">Car coupons</cover-view>
									<cover-view class="active_coupon_notice">Available over Mk4000</cover-view>
								</cover-view>
							</cover-view>
						</cover-view>

						<cover-view class="active_coupon_row">
							<cover-image class="active_coupon_row_bg" src="/static/img/bg_coupon.png"></cover-image>
							<cover-view class="active_coupon_row_bg flex_between">
								<cover-view class="active_coupon_left flex_left">
									<cover-view class="active_coupon_tag">MK</cover-view>
									<cover-view class="active_coupon_num">1000</cover-view>
								</cover-view>
								<cover-view class="active_coupon_right">
									<cover-view class="active_coupon_title">Car coupons</cover-view>
									<cover-view class="active_coupon_notice">Available over Mk4000</cover-view>
								</cover-view>
							</cover-view>
						</cover-view>

						<cover-view class="active_coupon_time">
							Activity time:2024-09-20~2024-10-31
						</cover-view>
						<cover-view class="active_coupon_btn">
							<cover-image class="active_coupon_btn_bg" src="/static/img/bg_btn.png"></cover-image>
							<cover-view class="active_coupon_btn_bg" @click="goCoupon()">Get it now</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</map>



	</view>
</template>

<script>
	import {
		req_
	} from '../../api/api.js';
	import {
		Loader
	} from '@googlemaps/js-api-loader';
	export default {
		data() {
			return {
				statusBarHeight: 0,
				// 当前地图实例
				map: null,
				// 渲染地图缩放等级，具体数字详见google map文档
				zoom: 8,
				// 渲染地图中心坐标
				center: {
					lat: '',
					lng: '',
					address: ''
				},
				markers: [],
				showLeft: false,
				showActive: true,
				carTypeId: '1',
				carTypeList: [{
						id: '1',
						name: 'Motorcycle'
					},
					{
						id: '2',
						name: 'Take a taxi'
					}
				],
				setList: [{
						id: '1',
						icon: 'mine_order.png',
						name: 'My Trips',
						path: '/pages/pay/order'
					},
					{
						id: '2',
						icon: 'mine_invite.png',
						name: 'Promotion',
						path: '/pages/promotion/promotion'
					},
					{
						id: '3',
						icon: 'mine_driver.png',
						name: 'Driver Join',
						path: '/pages/myProfle/myProfle'
					},
					{
						id: '4',
						icon: 'mine_safe.png',
						name: 'SecCenter',
						path: '/pages/setting/SecCenter'
					},
					{
						id: '5',
						icon: 'mine_coupon.png',
						name: 'Discounts',
						path: '/pages/discounts/discounts'
					},
					{
						id: '6',
						icon: 'mine_bank.png',
						name: 'Cards',
						path: '/pages/setting/cards'
					},
					{
						id: '7',
						icon: 'mine_feedback.png',
						name: 'Complain',
						path: '/pages/setting/Complaint'
					},
					{
						id: '8',
						icon: 'mine_serve.png',
						name: 'Customer Service',
						path: '/pages/setting/customer'
					},
					{
						id: '9',
						icon: 'mine_share.png',
						name: 'Share',
						path: '/pages/setting/share'
					},
					{
						id: '10',
						icon: 'mine_set.png',
						name: 'Setting',
						path: '/pages/setting/setting'
					}
				]
			}
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		mounted() {
			// this.initMap()
			// uni.navigateTo({
			// 	url: "/pages/driver/driver"
			// })
		},
		onShow() {

		},
		methods: {
			initMap() {
				const loader = new Loader({
					apiKey: 'AIzaSyD7A0vrfdfZHnlkLGwrVxzs3_NOAUDhTSw', // 替换为你的API密钥
					version: 'weekly',
					libraries: ['places'],
					language: 'en'
				});
				console.log(loader)

				loader.load().then(() => {
					console.log('google =ssss==', loader)
				}).catch(err => {
					console.log('google =err==', err)
				})


				// 导入google map地图类
				loader.importLibrary("maps");
				loader.importLibrary("core");

				// 导入google map地点类
				loader.importLibrary("geocoding");
			},
			// 调用方法
			getList() {
				let data = {

				}
				req_(data).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			// 去登录
			goLogin() {
				this.utils.reLaunch('/pages/login/login')
			},
			// 切换打车类型
			changeCarType(val) {
				this.carTypeId = val.id
			},
			// 展示侧边栏
			openPopup() {
				this.showLeft = true
			},
			// 去优惠券
			goCoupon(){
				this.utils.To('/pages/discounts/discounts') 
			},
			// 跳转方法
			goPage(val) {
				if (val.id == '3') {
					this.goProfle('2')
				} else {
					this.utils.To(val.path)
				}
			},
			goCallCar() {
				this.utils.To('/pages/pay/customerDetail')
			},
			back() {
				this.utils.Back()
			},


			//测试跳
			help() {
				uni.navigateTo({
					url: "/pages/setting/help"
				})
			},
			my() {
				uni.navigateTo({
					url: `/pages/promotion/myPromotion?type=2`
				})
			},
			orderDetail() {
				uni.navigateTo({
					url: "/pages/pay/orderDetail"
				})
			},
			driver() {
				uni.navigateTo({
					url: "/pages/driver/driver"
				})
			},
			share() {
				uni.navigateTo({
					url: "/pages/setting/share"
				})
			},
			setting() {
				uni.navigateTo({
					url: "/pages/setting/setting"
				})
			},
			custome() {
				uni.navigateTo({
					url: "/pages/setting/customer"
				})
			},
			complaint() {
				uni.navigateTo({
					url: "/pages/setting/Complaint"
				})
			},
			cards() {
				uni.navigateTo({
					url: "/pages/setting/cards"
				})
			},
			contactPerson() {
				uni.navigateTo({
					url: "/pages/setting/addEmer"
				})
			},
			postion() {
				uni.navigateTo({
					url: "/pages/index/postion"
				})
			},
			pay() {
				uni.navigateTo({
					url: "/pages/pay/pay"
				})
			},
			discounts() {
				uni.navigateTo({
					url: "/pages/discounts/discounts"
				})
			},
			goProfle(type) {
				uni.navigateTo({
					url: `/pages/myProfle/myProfle?type=${type}`
				})
			},
			goDriver() {
				uni.navigateTo({
					url: "/pages/driver/driver"
				})
			},
			ordriver() {
				uni.navigateTo({
					url: "/pages/myProfle/driverJoin"
				})
			},
			tixian() {
				uni.navigateTo({
					url: "/pages/promotion/addECP"
				})
			},
			promotion() {
				uni.navigateTo({
					url: "/pages/promotion/promotion"
				})
			},
			order() {
				uni.navigateTo({
					url: "/pages/pay/order"
				})
			},
			SecCenter() {
				uni.navigateTo({
					url: "/pages/setting/SecCenter"
				})
			}
		},
		onReachBottom() {

		},
		onPullDownRefresh() {

		}
	}
</script>

<style scoped>
	.map_top {
		padding: 15rpx 0;
		width: 100%;
	}

	.map_top_left {
		width: 109rpx;
		height: 109rpx;
		margin: 0 24rpx;
	}

	.driver_icon {
		width: 100%;
		height: 100%;
	}

	.logo_icon {
		width: 140rpx;
		height: 32rpx;
	}

	.map_bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 755rpx;
		background: #F7F7F7;
	}

	.map_bottom_bg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 755rpx;
	}

	.map_bottom {
		width: 100%;
		height: 755rpx;
		z-index: 99;
		border-radius: 60rpx;
	}

	.map_bottom_title {
		width: 88%;
		height: 120rpx;
		line-height: 120rpx;
		margin: 0 auto;
		font-weight: 800;
		font-size: 36rpx;
		color: #0E0E0E;
	}

	.ride_switch {
		position: relative;
		margin: 0 auto;
		width: 92%;
		height: 340rpx;
		background: #F7F7F7;
		border-radius: 40rpx;
	}

	.ride_switch_bg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.ride_switch_top {
		width: 100%;
		height: 80rpx;
	}

	.ride_switch_type {
		width: 50%;
		height: 80rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #0E0E0E;
		text-align: center;
		line-height: 80rpx;
	}

	.ride_switch_typeX {
		color: #33BA78;
	}

	.start_row {
		margin: 20rpx auto;
		width: 85%;
		height: 92rpx;
	}

	.start_row_point {
		width: 18rpx;
		height: 18rpx;
		background: #FFAA44;
		border-radius: 9rpx;
		margin: 15rpx 20rpx 0 20rpx;
	}

	.start_row_word {
		height: 92rpx;
		line-height: 92rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #232323;
	}

	.start_row_icon {
		width: 11rpx;
		height: 20rpx;
		margin: 15rpx 20rpx 0 20rpx;
	}

	.end_row {
		margin: 0 auto;
		width: 85%;
		height: 92rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #F4F4F4;
		border-radius: 30rpx;
	}

	.end_row_point {
		width: 18rpx;
		height: 18rpx;
		background: #33BA78;
		border-radius: 9rpx;
		margin: 15rpx 20rpx 0 20rpx;
	}

	.set_row {
		margin: 30rpx auto;
		width: 92%;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
	}

	.set_card {
		text-align: center;
	}

	.set_icon {
		width: 80rpx;
		height: 80rpx;
		margin: 0 auto;
	}

	.set_word {
		margin-top: 18rpx;
		font-size: 24rpx;
		color: #0E0E0E;
	}

	.to_driver {
		text-align: center;
		font-size: 35rpx;
		color: #0E0E0E;
	}

	.popup_modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 99;
	}

	.popup_card {
		position: absolute;
		left: 0;
		top: 0;
		width: 510rpx;
		height: 100%;
		background: #D8E5DF;
	}

	.user_box {
		margin-top: 90rpx;
		padding: 50rpx;
	}

	.user_phone {
		font-weight: 900;
		font-size: 34rpx;
		color: #0E0E0E;
	}

	.user_set {
		margin-top: 15rpx;
	}

	.user_set_word {
		font-weight: 400;
		font-size: 24rpx;
		color: #888888;
	}

	.user_set_icon {
		width: 11rpx;
		height: 20rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
	}

	.user_img {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
	}

	.set_list {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 510rpx;
		height: 82%;
		overflow: scroll;
		background: #FFFFFF;
	}

	.set_list_row {
		padding: 0 50rpx;
		width: 70%;
		height: 100rpx;
	}

	.set_img {
		width: 38rpx;
		height: 38rpx;
		margin-right: 30rpx;
	}

	.set_name {
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		height: 100rpx;
		line-height: 90rpx;
	}

	.active_card {
		position: relative;
		width: 650rpx;
		height: 802rpx;
	}

	.active_card_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.active_title {
		margin-left: 48rpx;
		margin-top: 180rpx;
		font-weight: 800;
		font-size: 48rpx;
		height: 50rpx;
		line-height: 20rpx;
		color: #0E0E0E;
	}

	.active_coupon_row {
		position: relative;
		margin: 30rpx auto;
		width: 540rpx;
		height: 155rpx;
	}

	.active_coupon_row_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.active_coupon_left {
		margin-left: 15rpx;
	}

	.active_coupon_tag {
		font-weight: bold;
		font-size: 24rpx;
		color: #33B777;
		margin-top: 36rpx;
	}

	.active_coupon_num {
		font-weight: bold;
		font-size: 60rpx;
		color: #33B777;
	}

	.active_coupon_right {
		margin-right: 50rpx;
	}

	.active_coupon_title {
		font-weight: bold;
		font-size: 36rpx;
		color: #050A10;
	}

	.active_coupon_notice {
		margin-top: 15rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #050A10;
	}

	.active_coupon_time {
		margin: 30rpx 0;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #0D0D0D;
	}

	.active_coupon_btn {
		position: relative;
		margin: 0 auto;
		width: 390rpx;
		height: 123rpx;
	}

	.active_coupon_btn_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 123rpx;
		text-align: center;
	}
</style>